<template>
	<view class="page">
		<!-- 圆通快递 -->
		<view class="express">
			<view class="top ali-c">
				<view class="picture">
					<image class="img" mode="aspectFill" :src="wlInfo.logo"></image>
				</view>
				<view class="text">
					<view class="text1">{{ wlInfo.post_name }}</view>
					<view class="text2">{{ wlInfo.exp_phone }}</view>
				</view>
			</view>
			<view class="right">
				<view class="text">{{ wlInfo.post_name }} {{ wlInfo.post_no }}</view>
			</view>
		</view>

		<!-- 收货地址 -->
		<view class="content bgf">
			<view>
				<view class="flex list">
					<view class="time"></view>
					<view class="info flex1">
						<view class="title address">[收货地址]{{ wlInfo.addr }}</view>
					</view>
				</view>
        <view class="flex list" v-if="wlInfo.reason != ''">
            {{wlInfo.reason}}
        </view>
				<view class="flex list" :class="{ one: index == 0 && wlInfo.delivery_status == 1 }"
					v-for="(item, index) in wlInfo.list" :key="index">
					<view class="time">
						<view class="day">{{ item.timeArr[0] }}</view>
						<view>{{ item.timeArr[1] }}</view>
					</view>
					<view class="info flex1">
						<view class="title">{{ item.Stauts }}</view>
						<view class="text">{{ item.remark }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

import {onMounted} from "vue";
const props = defineProps({
	wlInfo: {
		type: Object,
		default: () => ({})
	}
})


onMounted(()=> {
console.log(props.wlInfo)
})
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 44px);
	/* #endif */
	font-size: 24rpx;
	background-color: #F6F7F8;
	overflow-y: auto;
}

/*flex 转换成flex容器*/
.flex {
	display: flex;
	flex-direction: row;
}

/*flex1 自动填充*/
.flex1 {
	flex: 1;
}

/*ali-c 竖直居中*/
.ali-c {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.bgf {
	background-color: #fff;
}

.express {
	//圆通快递
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 30rpx 20rpx 30rpx 20rpx;

	.top {
		padding: 28rpx 29rpx 25rpx 29rpx;

		.img {
			display: block;
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
		}

		.text {
			margin-left: 20rpx;

			.text1 {
				margin-bottom: 6rpx;
				font-size: 28rpx;
				color: #000000;
			}

			.text2 {
				font-size: 20rpx;
				color: #000000;
			}
		}
	}

	.right {
		background-color: rgba(8, 175, 254, 0.02);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		padding: 15rpx 30rpx 20rpx 30rpx;

		.text {
			color: #666666;
			font-size: 22rpx;
		}
	}
}

//收货地址
.content {
	margin: 20rpx;
	padding: 56rpx 46rpx 56rpx 5rpx;
	border-radius: 20rpx;

	.list {
		&:first-child {
			.info::before {
				bottom: -20rpx;
				margin-top: 40rpx;
				border-left: 1px dashed #e5e5e5;
			}

			.title {
				margin-bottom: 56rpx;

				&::before {
					width: 46rpx;
					height: 46rpx;
					left: -23rpx;
					background: url('') no-repeat center;
					background-size: 46rpx 46rpx;
				}
			}
		}

		&:last-child {
			.info::before {
				height: 32rpx;
			}
		}

		&.one {
			.info::before {
				margin-top: 20rpx;
			}

			.title {
				color: #1a1a1a;

				&::before {
					width: 46rpx;
					height: 46rpx;
					left: -23rpx;
					background: url('') no-repeat center;
					background-size: 46rpx 46rpx;
				}
			}

			.text {
				color: #666;
			}

			.time {
				color: #333;

				.day {
					font-size: 24rpx;
				}
			}
		}
	}

	.time {
		width: 200rpx;
		padding-right: 30rpx;
		font-size: 20rpx;
		text-align: right;
		color: #999;

		.day {
			margin-bottom: 4rpx;
		}
	}

	.info {
		position: relative;
		padding-top: 12rpx;
		color: #999;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			z-index: 1;
			width: 0;
			border-left: 1px solid #e5e5e5;
		}

		.title {
			position: relative;
			margin-bottom: 10rpx;
			padding-left: 32rpx;
			font-size: 28rpx;

			&::before {
				content: "";
				position: absolute;
				left: -3px;
				top: 0;
				bottom: 0;
				z-index: 1;
				width: 7px;
				height: 7px;
				margin: auto 0;
				border-radius: 50%;
				background-color: #cecece;
			}

			&.address {
				font-size: 24rpx;
				color: #333;
			}
		}

		.text {
			padding: 0 0 44rpx 32rpx;
		}
	}
}
</style>
